<template>
	<view>
		<view class="head_bg">
			<view class=" text-center text-white text-lg padding-bottom-sm" :style="{'padding-top':HEIGHT+'px'}">
				<!-- 我的 -->
			</view>
			<view class="flex padding-lr padding-bottom align-center" v-if="userInfoData.avatar !=undefined">
				<view style="height: 100rpx;width: 100rpx;" @click="$tools.Router('/pages/user/setting')">
					<image :src="userInfoData.avatar" mode="aspectFill" style="height: 90rpx;width: 90rpx;"
						class="round bg-gray"></image>
				</view>
				<view class="text-white text-sm margin-left" style="line-height: 50rpx;">
					<view class=" onelineshow" style="width:600rpx;">
						<view class="flex rowsb padding-right">
							<view class=" text-xl ">
								{{userInfoData.username}}
							</view>

						</view>
					</view>
					<view class="">
						{{userInfoData.mobile}}
					</view>
				</view>
			</view>
		</view>
		<view class="rowsc" style="margin-top: -70rpx;">
			<view class="user_order">
				<view class="solid-bottom order_top_body">
					<view class="order_title">我的订单</view>
					<view class="order_content" @click="orderMen(1)">查看所有订单</view>
				</view>
				<view class="rowsa">
					<view class="text-center margin-top-xl" v-for="(item,index) in orderClassifyList" :key="index"
						@click="orderMen(1)">
						<image :src="item.image" mode="" class=""></image>
						<view class="order_classify_title">
							{{item.title}}
						</view>
					</view>
				</view>
			</view>
		</view>



		<view class="user_plugins">
			<view class="plugins_list " v-for="(item,index) in pluginsList" :key="item.id" @click="pluginsMen01(item)">
				<view class="align-center">
					<image :src="item.image" mode=""></image>
					<text class="margin-left-sm">{{item.name}}</text>
				</view>
				<view class="cuIcon-right text-gray" style="font-size: 40rpx;"></view>
			</view>
		</view>
		<view class="user_plugins">
			<view class="plugins_list  " v-for="(item,index) in pluginsList2" :key="item.id" @click="pluginsMen(item)">
				<view class="align-center">
					<image :src="item.image" mode=""></image>
					<text class="margin-left-sm">{{item.name}}</text>
				</view>
				<view class="cuIcon-right text-gray" style="font-size: 40rpx;"></view>
			</view>
		</view>
		<view class="user_plugins">
			<view class="plugins_list  " v-for="(item,index) in pluginsList3" :key="item.id"
				@click=" pluginsList3Goto(item)">
				<view class="align-center">
					<image :src="item.image" mode=""></image>
					<text class="margin-left-sm">{{item.name}}</text>
				</view>
				<view class="cuIcon-right text-gray" style="font-size: 40rpx;"></view>
			</view>
		</view>
		<login v-if="userInfoData.avatar ==undefined"></login>

	</view>
</template>

<script>
	export default {
		data() {
			return {
				pluginsList: [{
						name: 'VIP权益',
						image: "/static/user/icon_gerzl.png",
						toUrl: '/pages/user/setting',
						id:1
					},
					{
						name: '我的收藏',
						image: "/static/user/icon_wodeqb.png",
						toUrl: '/pages/user/account',
						id:2
					},

				],

				pluginsList2: [

					{
						name: '申请代理商',
						image: "/static/user/icon_fenxyl.png",
						toUrl: '/pages/plugins/agencyFrom',
						id: 1
					},
					{
						name: '地址管理',
						image: "/static/user/icon_wodedd.png",
						toUrl: '/pages/address/index',
						id: 2
					},
					{
						name: '分享好友',
						image: "/static/user/icon_wodefb.png",
						toUrl: '/pages/message/index',
						id: 3
					},
					{
						name: '系统通知',
						image: "/static/user/icon_youkxt.png",
						toUrl: '/pages/user/learning',
						id: 4
					},
					{
						name: '意见反馈',
						image: '/static/user/icon_wodezh.png',
						toUrl: '/pages/plugins/houses',
						id: 5
					},
					{
						name: '联系客服',
						image: '/static/user/icon_guanyupt.png',
						toUrl: '/pages/plugins/exchange',
						id: 6
					},


				],
				userInfoData: {} //用户信息
			}
		},

		onShow() {
			this.userInfoData = uni.getStorageSync('userInfo')

		},
		onLoad() {},
		methods: {
			// 功能
			pluginsMen01(item) {
				this.$tools.showToast('暂未开放')
			},


			//订单列表页面
			orderMen() {
				uni.navigateTo({
					url: '../order/index'
				})
			},
			//功能
			pluginsMen(item) {
				if (item.id == 4 || item.id == 5) {
					this.$tools.showToast('暂未开通')
					return
				}
				if (item.id == 6) {
					uni.makePhoneCall({
						phoneNumber: 13176011182 + ''
					})
					return
				}
				this.$tools.push(item.toUrl)
			}
		},
		computed: {
			orderClassifyList() {
				let data = [{
						id: 1,
						title: '待付款',
						image: "/static/user/dfk.png",
						toUrl: "/pages/my/myOrder?type=0"
					},
					{
						id: 2,
						title: '待发货',
						image: "/static/user/dfh.png",
						toUrl: "/pages/my/myOrder?type=1"
					},
					{
						id: 3,
						title: '待收货',
						image: "/static/user/dsh.png",
						toUrl: "/pages/my/myOrder?type=2"
					},
					{
						id: 4,
						title: '已完成',
						image: "/static/user/ysh.png",
						toUrl: "/pages/my/myOrder?type=2"
					}
				]
				return data
			},
			HEIGHT() {
				return uni.getSystemInfoSync().statusBarHeight + 15

			}
		},


	}
</script>

<style lang="scss">
	.head_bg {
		width: 750rpx;
		height: 322rpx;
		background: #F67D0C;
	}

	.bg-yan {
		background-color: #FF6200;
		color: #FFFFFF;
	}

	page {
		background: #F2EFEF;
	}

	.xuan {
		width: 25%;
	}


	.user_plugins {
		background-color: white;
		margin: 30rpx;
		border-radius: 8rpx;
		overflow: hidden;
	}

	.plugins_list {
		padding: 25rpx;
		align-items: center;
		display: flex;
		justify-content: space-between;

	}

	.plugins_list>view>image {
		width: 50rpx;
		height: 50rpx;
	}

	//订单
	.user_order {
		width: 690rpx;
		height: 279rpx;
		background: #FFFFFF;
		box-shadow: 0px 3rpx 6rpx rgba(0, 0, 0, 0.06);
		border-radius: 20rpx;
		padding: 30rpx;

		.order_top_body {
			display: flex;
			justify-content: space-between;
		}

		.order_title {
			font-size: 32rpx;
			font-family: PingFang SC;
			font-weight: bold;
			color: #5B5E63;
		}

		.order_classify_title {
			font-size: 24rpx;
			font-family: PingFang SC;
			color: #333333;
			opacity: 0.7;
			margin-top: 20rpx;
		}

		image {
			width: 50rpx;
			height: 50rpx;
		}

		.order_content {
			font-size: 24rpx;
			font-family: PingFang SC;
			font-weight: 400;
			color: #5B5E63;
			opacity: 1;
		}
	}
</style>
